<template>
  <div class="app-container chart-bg">
    <!-- :gutter="40" 属性设置了每一列之间的间隔为 40px -->
    <el-row :gutter="40">
      <!-- 用户数卡片 -->
      <!-- 定义一个列元素，占据网格系统的6份，在额外小屏幕设备中占据12份 -->
      <el-col :span="6" :xs="12">
        <div class="grid-content">
          <svg-icon icon-class="user" class-name="card-panel-icon" />
          <div class="grid-content-right">
            <h3>用户数</h3>
            <div class="number">{{ allTotal.userTotal }}</div>
          </div>
        </div>
      </el-col>
      <!-- 轮播图数卡片 -->
      <el-col :span="6" :xs="12">
        <div class="grid-content">
          <svg-icon icon-class="lbt" class-name="card-panel-icon" />
          <div class="grid-content-right">
            <h3>轮播图数</h3>
            <div class="number">{{ allTotal.bannnerTotal }}</div>
          </div>
        </div>
      </el-col>
      <!-- 新闻数卡片 -->
      <el-col :span="6" :xs="12">
        <div class="grid-content">
          <svg-icon icon-class="xw" class-name="card-panel-icon" />
          <div class="grid-content-right">
            <h3>新闻数</h3>
            <div class="number">{{ allTotal.newsTotal }}</div>
          </div>
        </div>
      </el-col>
      <!-- 客户申请数卡片 -->
      <el-col :span="6" :xs="12">
        <div class="grid-content">
          <svg-icon icon-class="application" class-name="card-panel-icon" />
          <div class="grid-content-right">
            <h3>客户申请数</h3>
            <div class="number">1000</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { comprehensiveData } from '@/api/search'
export default {
  name: 'PanelGroup', // 组件名称
  data() {
    return {
      allTotal: { // 总数据统计
        userTotal: 0, // 用户总数
        newsTotal: 0, // 新闻总数
        bannnerTotal: 0 // 轮播图总数
      }
    }
  },
  mounted() {
    this.getComprehensive() // 在组件挂载后获取综合数据
  },
  methods: {
    async getComprehensive() {
      try {
        const response = await comprehensiveData() // 调用API获取综合数据

        this.allTotal = response.data // 更新组件数据
      } catch (error) {
        console.log('error: ', error) // 错误处理
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-bg {
  background-color: #f0f2f5; // 背景颜色
}
.grid-content {
  height: 110px; // 卡片高度
  display: flex; // 弹性盒显示
  justify-content: space-around; // 主轴上内容均匀排列
  align-items: center; // 侧轴上内容居中显示
  background-color: #fff; // 卡片背景颜色
}
.card-panel-icon {
  font-size: 48px; // 图标字体大小
  color: #40c9c6; // 图标颜色
}
.grid-content-right h3 {
  line-height: 18px; // 标题行高
  color: rgba(0, 0, 0, 0.45); // 标题颜色
  font-size: 16px; // 标题字体大小
  margin-bottom: 12px; // 标题底部边距
}
.grid-content-right .number {
  font-size: 20px; // 数字字体大小
  font-weight: bold; // 数字字体加粗
}
</style>
